<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-focus>
    <h1 v-color.kun="c">局部自定义指令</h1>
</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    // 指令修饰符 v-abc.xx xx就是指令修饰符

    // 指令参数 v-abc:xx xx就是指令参数

    //钩子(hook)🪝函数:程序执行到某个阶段后调用的函数就叫做钩子函数

    //vue是不推崇操作dom,特殊的情况下也需要操作dom

    //自定义指令是vue操作dom的一种方式

    //全局自定义指令

    //写一个能够让输入框自动获得焦点的指令,vue的自定义指令约定,在使用的时候需要加上v-前缀


    //vue2.0中,自定义指令有3个钩子函数
    Vue.directive('focus', {
        bind(el, binding) {
            //指令第一次绑定到元素上的时候调用
            console.log('bind--', el.parentNode)
        },
        //常用的参数就是el和binding
        //el就是指令所在的dom元素
        //binding是一个对象,里面有一些操作指令的属性
        inserted(el, binding) {
            //指令第一次插入到父节点的时候调用
            // console.log(el)
            el.focus()
            console.log('inserted---', el.parentNode)
        },
        update(el, binding) {
            //指令所在的虚拟dom发生变化的时候调用
            console.log('虚拟dom发生变化了')
        }
    })

    //局部自定义指令
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "洗剪吹",
            c: 'green'
        },
        directives: {
            //这个自定义指令的作用就是将文字的颜色变成红色
            color: {
                inserted(el, binding) {
                    el.style.color = binding.value;
                    //获取修饰符
                    let modifiers = binding.modifiers;
                    // console.log(modifiers)
                    console.log(binding)

                    //定义修饰符的功能

                    //如果修饰符是kun,那我们给指令所在的元素内容前面加上🐔🐔

                    if (modifiers['kun']) {
                        // console.log(el.innerText)
                        let oldText = el.innerText;
                        el.innerText = "🐔" + oldText + "🐔"
                    }

                    if (binding.arg === 'bg') {
                        el.style.backgroundColor = 'deepskyblue'
                    }

                },
                update(el, binding) {
                    el.style.color = binding.value;
                }
            }
        }
    })
</script>